<template>
  <el-dialog
    v-model="visible"
    :title="dialogTitle"
    width="600px"
    @close="handleClose"
  >
    <el-form
      :model="formData"
      label-width="80px"
    >
      <el-form-item label="事件类型">
        <el-select v-model="formData.type" placeholder="请选择" style="width: 240px">
          <el-option
            v-for="item in typeData"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>

      <el-form-item label="事件列表">
        <div class="row-items">
          <div
            v-for="(item, index) in formData.contentData"
            :key="index"
            class="row-item"
          >
            <el-input
              v-model="formData.contentData[index]"
              placeholder="请输入内容"
            >
              <template #append>
                <el-button @click="removeEvent(index)">删除</el-button>
              </template>
            </el-input>
          </div>

          <div class="add-row">
            <el-button
              type="primary"
              size="small"
              @click="addEvent"
            >添加</el-button
            >
            <el-button
              v-if="formData.contentData.length > 0"
              type="danger"
              size="small"
              @click="handleDelete"
            >全部删除</el-button
            >
          </div>
        </div>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="handleConfirm"
        >保存</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ElMessageBox } from 'element-plus'

import { typeData } from './data'

const props = defineProps({
  rowData: {
    type: Object,
    default: () => {}
  }
})

const emit = defineEmits(['confirm', 'delete'])

const visible = defineModel()

const formData = ref({
  year: '',
  month: '',
  type: '',
  contentData: []
})

const dialogTitle = computed(() => {
  return `${formData.value.year}年${formData.value.month}月`
})

watch(
  () => props.rowData,
  (newVal) => {
    formData.value = {
      year: newVal.year,
      month: newVal.month,
      type: newVal.content.type || '',
      contentData: newVal.content.data ? [...newVal.content.data] : ['']
    }
    console.log('output->formData',formData)
  },
  { deep: true }
)

const addEvent = () => {
  formData.value.contentData.push('')
}

const removeEvent = (index) => {
  formData.value.contentData.splice(index, 1)
}

const handleClose = () => {
  visible.value = false
}

const handleConfirm = () => {
  const filteredEvents = formData.value.contentData.filter(
    (item) => item.trim() !== ''
  )

  if (filteredEvents.length === 0) {
    return visible.value = false
  }

  emit('confirm', {
    year: formData.value.year,
    month: formData.value.month,
    content: {
      type: formData.value.type,
      data: filteredEvents
    }
  })
  visible.value = false
}

const handleDelete = () => {
  ElMessageBox.confirm('确定要删除这个月份的所有内容吗？', '确认删除', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      emit('delete', {
        year: formData.value.year,
        month: formData.value.month
      })
      visible.value = false
    })
}
</script>

<style lang="scss" scoped>
.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.row-items {
  width: 100%;

  .row-item {
    margin-bottom: 10px;
  }
}

.add-row {
  margin-top: 10px;
  text-align: right;
}
</style>
